<div :style="style">
    <ButtonGroup>
        <i-button size="small" @click="togglePause">
            <tooltip v-if="paused" :content="$t('继续执行')" placement="top" transfer>
                <Icon type="md-play" />
            </tooltip>
            <tooltip v-else :content="$t('暂停')" placement="top" transfer>
                <Icon type="md-pause" />
            </tooltip>
        </i-button>
        <i-button size="small">
            <tooltip :content="$t('跳步')" placement="top" transfer>
                <Icon type="md-skip-forward" />
            </tooltip>
        </i-button>
        <i-button size="small">
            <tooltip :content="$t('步进')" placement="top" transfer>
                <Icon type="md-arrow-round-down" />
            </tooltip>
        </i-button>
        <i-button size="small">
            <tooltip :content="$t('步出')" placement="top" transfer>
                <Icon type="md-arrow-round-up" />
            </tooltip>
        </i-button>
        <i-button size="small">
            <tooltip :content="$t('单步')" placement="top" transfer>
                <Icon type="md-arrow-round-forward" />
            </tooltip>
        </i-button>
        <i-button size="small" @click="pause">
            <tooltip :content="$t('启用断点')" placement="top" transfer>
                <Icon v-if="breakpointsEnabled" type="ios-alert" />
                <Icon v-else type="ios-alert-outline" />
            </tooltip>
        </i-button>
    </ButtonGroup>
    <Collapse simple :model-value="['1','2','3']" style="user-select: none;">
        <Panel name="1">
            {{$t('FSM')}}
            <template #content>
                <div style="display: flex;flex-direction: column;font-size:14px;">
                    <p v-for="fsm in debuggingVMState.FSMs"
                        :style="{backgroundColor:displayFSM==fsm.id?'#5cadff':'white', borderTop:'1px solid #ccc'}">
                        <Icon type="md-arrow-dropright" :style="{color:fsm.broken?'#2d8cf0':'white'}" />
                        {{fsm.name}}#{{fsm.id}},{{fsm.state}}
                        <span v-show="fsm.pendingMessageCount>0"
                            style="color:#2d8cf0">[{{fsm.pendingMessageCount}}]</span>
                    </p>
                </div>
            </template>
        </Panel>
        <Panel name="2">
            {{$t('栈')}}
            <template #content>
                <div style="display: flex;flex-direction: column;font-size:14px;">
                    <p v-for="(frame,idx) in debuggingVMState.stack" @click="gotoBlock(frame.inst,idx)"
                        style="cursor: pointer;border-top: 1px solid #ccc;">
                        <Icon type="md-arrow-dropright" style="color:#2d8cf0"
                            v-if="frame.inst===debuggingVMState.selectedFrame" />
                        {{frame.text || frameToDisplay(frame.inst)}}
                    </p>
                </div>
            </template>
        </Panel>
        <Panel name="3">
            {{$t('计算值')}}
            <template #content>
                <div style="display: flex;flex-direction: column;font-size:14px;">
                    <p v-for="(frame,idx) in debuggingVMState.frameDetial" @click="gotoBlock(frame[0])"
                        style="cursor: pointer;border-top: 1px solid #ccc;">
                        <span style="color:rgb(142,48,145)">{{idx}}:{{frame.text}}</span>
                        <br />
                        {{$t(frame.ASTType)}}:{{frame.valueText}}
                    </p>
                </div>
            </template>
        </Panel>
    </Collapse>
</div>